<!--  -->
<template>
    <div class="row-box">
        <div class="title">
            {{data.title}}
            <el-button
                type="primary"
                icon="el-icon-circle-plus"
                class="handle-del mr10 ml10"
                size="mini"
                @click="addRow"
            >增行</el-button>
            <el-button
                type="primary"
                icon="el-icon-delete"
                class="handle-del mr10"
                size="mini"
                @click="delRow"
            >删行</el-button>
        </div>

        <table border="0" width="100%" cellpadding="0" cellspacing="1">
            <thead>
                <tr align="middle">
                    <td width="5%">序号</td>
                    <template v-for="item in data.thead">
                        <td :key="item.id" :width="tdWidth">{{item.value}}</td>
                    </template>
                </tr>
            </thead>
        </table>
        <div class="table-bd">
            <table border="0" width="100%" cellpadding="0">
                <tbody>
                    <template v-for="(item, index) in newList">
                        <tr
                            :key="item.key"
                            :class="{'currentRow': index === current}"
                            @click="clickTr(item, index)"
                        >
                            <td width="5%" align="middle">{{index + 1}}</td>
                            <template v-for="(sitem, sindex) in item">
                                <td
                                    :key="sitem.key"
                                    :width="tdWidth"
                                    align="middle"
                                    @click="clickTd (sitem, index, sindex)"
                                >
                                    <div style="min-width:120px">
                                        <el-input
                                            v-show="sitem.type == 'text' && sitem.showInput"
                                            style="width:99%"
                                            placeholder="请输入内容"
                                            v-model="sitem.value"
                                            size="mini"
                                            @change="dealData"
                                            clearable
                                        ></el-input>
                                        <el-date-picker
                                            v-show="sitem.type == 'date' && sitem.showInput"
                                            style="width:99%"
                                            v-model="sitem.value"
                                            align="right"
                                            size="mini"
                                            type="date"
                                            format="yyyy-MM-dd"
                                            value-format="yyyy-MM-dd"
                                            @change="dealData"
                                            placeholder="选择日期"
                                        ></el-date-picker>
                                    </div>
                                    <span v-if="!sitem.showInput">
                                        <div
                                            v-if="sitem.type == 'date'&&sitem.value!=''&&sitem.value!=null"
                                        >{{sitem.value|formatDate}}</div>
                                        <div v-if="sitem.type == 'text'">{{sitem.value}}</div>
                                    </span>
                                </td>
                            </template>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main.js';
var _ = require('lodash');
export default {
    props: {
        data: {
            title: '',
            thead: [], // 表头标题
            dataList: [], // 数据
            emptyItem: [] // 单条空数据
        }
    },
    data() {
        return {
            newList: [],
            current: '', //当前点中的是第几行
            tdWidth: 0
        };
    },
    methods: {
        // 增加一行
        addRow() {
            //let obj = _.cloneDeep(this.data.emptyItem);
            let obj = this.data.emptyItem;
            this.newList.push(obj);
        },
        // 删除某行
        delRow() {
            if (this.current === '') {
                return;
            }
            this.newList.splice(this.current, 1);
            this.current = '';
            this.$emit('fun', { backData: this.newList });
        },
        clickTr(item, index) {
            this.current = index;
        },
        // 点击单项
        clickTd(sitem, index, sindex) {
            console.log('clickTd', sitem, index, sindex);
            sitem.showInput = true;
            //let list = _.cloneDeep(this.newList);
            let list = this.newList;
            list.map((item, i) => {
                item.map((obj, si) => {
                    if (i == index && si == sindex) {
                    } else {
                        obj.showInput = false;
                    }
                });
            });
            this.newList = list;
        },
        dealData() {
            this.$emit('fun', { backData: this.newList });
        }
    },
    watch: {
        newList: function(newVal, oldVal) {
            //console.log(newVal, 'newVal')
            //this.$emit('fun', { backData: this.newList });
        }
    },
    computed: {
        aNum() {
            return 123;
        }
    },
    created() {
        // 加载后如果数据少于4条，补为4条
        //let list = _.cloneDeep(this.data.dataList);
        let list = this.data.dataList;
        console.log('created list ', list);
        if (list.length < 4) {
            for (let i = 0; i < 4 - this.data.dataList.length; i++) {
                //let obj = _.cloneDeep(this.data.emptyItem);
                let obj = this.data.emptyItem;
                list.push(obj);
            }
        }
        console.log(list, 'newList');
        this.tdWidth = Math.floor(85 / this.data.emptyItem.length) + '%';
        this.newList = list;
        console.log('created', this.newList);
    },
    filters: {
        //时间过滤器
        formatDate: function(val) {
            let date = new Date(val);
            return appMain.formatDate(date, 'yyyy-MM-dd');
        }
    }
};
</script>

<style scoped>
.row-box {
    width: 100%;
    border: 1px solid #666;
    margin-top: 20px;
    font-size: 12px;
}
.row-box .title {
    font-size: 14px;
    padding: 6px 4px;
}
.row-box .table-bd {
    height: 146px;
    width: 100%;
    overflow: auto;
}
.row-box .table-bd td {
    border-bottom: 1px solid #dfdfdf;
    padding: 4px;
    height: 28px;
    overflow: hidden;
}
.currentRow {
    color: #ff6554;
}

.ml10 {
    margin-left: 10px;
}
.mt20 {
    margin-top: 20px;
}
</style>
<style>
.row-box .currentRow .el-input__inner {
    color: #ff6554 !important;
}
</style>